/<template>
  <div class="right">
    <ul>
      <li v-for="item in child" :key="item.id">
        <h1>--{{ item.title }}--</h1>
        <ol>
          <li v-for="value in item.children" :key="value.id">
            <img :src="value.img" alt="" srcset="" />
            <p>{{ value.name }}</p>
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    child: Array,
  },
};
</script>

<style>
.right h1 {
  width: 100%;
  height: 50px;
  background: #eee;
  text-align: center;
  line-height: 50px;
}
.right ol {
  display: flex;
  flex-wrap: wrap;
}
.right ol li {
  width: 33%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.right ol li p{
  margin-top: 10px;
}
.right ol li img{
  width: 50px;
  height: 50px;
}
</style>